<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="searchParam" :inline="true">
        <el-form-item label="检具">
          <el-input
            v-model="searchParam.detectionEquipCode"
            placeholder="请输入检具编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="生产设备" prop="processEquipCode">
          <el-select
            v-model="searchParam.processEquipId"
            placeholder="请选择生产设备"
            clearable
            @change="handleSelect"
          >
            <el-option
              v-for="item in equipProduceList"
              :key="item.id"
              :label="item.equipCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="状态">
          <el-select
            v-model="searchParam.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              v-for="item in useDictionary('inspectionToolsType')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch"
            ><i-ep-search />搜索</el-button
          >
          <el-button @click="handleReset"><i-ep-refresh />重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <!-- <div class="content">
        <div v-for="(item, index) in tableData" :key="item.id">
          <div class="box" :style="{ background: item.color }">
            <div style="margin-top: 5px; font-weight: 700">
              {{ item.locationName }}
            </div>
            <div style="margin: 5px 0">{{ item.assetName }}</div>
            <div v-if="item.process">
              使用进度<span style="font-weight: 700">{{ item.process }}</span>
            </div>
          </div>
        </div>
      </div> -->
      <div style="display: flex; margin: 0 10px 10px 10px">
        <div style="font-size: 20px; font-weight: 700">
          总数：{{ dataList.length }}
        </div>
        <div
          style="
            font-size: 20px;
            font-weight: 700;
            color: #81b337;
            margin-left: 10px;
          "
        >
          上线：{{ goOnline }}
        </div>
        <div
          style="
            font-size: 20px;
            font-weight: 700;
            color: #909399;
            margin-left: 10px;
          "
        >
          离线：{{ offline }}
        </div>
      </div>
      <div
        class="content"
        style="overflow: auto; height: calc(100vh - 280px); overflow-y: auto"
      >
        <div v-for="(item, index) in dataList" :key="item.id">
          <div
            @click="openDialogdetail(item)"
            class="box"
            :style="{
              background:
                item.status == 1
                  ? '#81b337'
                  : item.status == 0
                  ? '#909399'
                  : '',
            }"
          >
            <div class="box1">
              <span> {{ item.detectionEquipCode || "" }}</span>
              <span> {{ item.status == 1 ? "上线" : "离线" }}</span>
            </div>
            <div class="box1">
              <span> 检具名称：{{ item.toolName || "" }}</span>
              <span> </span>
            </div>
            <div class="box1">
              <span> 检具类型：{{ item.toolKind || "" }}</span>
              <span> </span>
            </div>
            <div class="box1">
              <span> 生产设备：{{ item.processEquipCode || "" }}</span>
              <span> </span>
            </div>
            <div class="box1">
              <span> 采集方式：{{ item.qaDataType || "" }}</span>
              <span> </span>
            </div>
            <div class="box1">
              <span> 采集时间：{{ item.lastCollectTime || "" }}</span>
              <span> </span>
            </div>
            <div class="box1">
              <span> 运行方式：{{ item.runMode || "" }} </span>
              <span> </span>
            </div>
            <div class="box1">
              <span>
                程序版本：
                {{ item.applicationVersion || "" }}
              </span>
              <span> </span>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="dataList?.length == 0"
        style="text-align: center; color: #909399; font-size: 14px"
      >
        暂无数据
      </div>
    </el-card>
    <!-- <molddeviceinfo-edit
      :visible="addDialog.visible"
      :title="addDialog.title"
      :assetTypeIdTree="assetTypeIdTree"
      :data="addDialog.data"
      @reset-table="(id:string) => (id?.length ? getDataList() : getDataList())"
      :is-readonly="addDialog.readvisible"
      @change-visible="changeVisible"
    /> -->
  </div>
</template>

<script setup lang="ts">
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
import request from "@/utils/request";

import { filterOrder } from "@/utils/commonHooks";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
import { status } from "nprogress";
const dictionaryStore = useDictStoreHook();
defineOptions({
  name: "CDBGAUGEMONITORING",
  inheritAttrs: false,
});
const props = defineProps({
  assetKind: {
    type: Number,
    default: null,
  },
});

// 上线数
const goOnline = computed(() => {
  return dataList.value.filter((item) => item.status == 1).length;
});
// 离线数
const offline = computed(() => {
  return dataList.value.filter((item) => item.status == 0).length;
});

const tableData = ref([]);

const { assetKind } = toRefs(props);

// 请求参数

// 初始化搜索参数数据
const searchParam = ref({
  detectionEquipCode: "",
  processEquipCode: "",
  processEquipId: "",
  status: "",
});

const handleSearch = () => {
  getDataList();
};
const handleReset = () => {
  searchParam.value.processEquipCode = "";
  searchParam.value.detectionEquipCode = "";
  searchParam.value.processEquipId = "";
  searchParam.value.status = "";
  getDataList();
};

const addDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

// 查询详情
async function getInfo(id: string) {
  request({
    url: `/eam/mouldAssetInfo/get/${id}`,
    method: "get",
  })
    .then((data) => {
      addDialog.data = data.data;
      addDialog.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}

/** 打开资产台账表单弹窗 */
const assetTypeIdTree = ref("");

/** 打开资产台账表单弹窗 详情 */
function openDialogdetail(roleObj?: any) {
  // addDialog.title = "模具详情";
  // getInfo(roleObj.id);
  // addDialog.readvisible = true;
}

function changeVisible(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
    assetTypeIdTree.value = "";
  }
}
let timer = null;
onMounted(() => {
  getEquipProduceList();
  getDataList();
  timer = setInterval(() => {
    getDataList();
    // console.log(index, boardConfig.value.length);
  }, 10000);
});
onBeforeUnmount(() => {
  clearInterval(timer);
  console.log("Component is about to be unmounted");
  // 可以在这里执行一些清理操作
});
// 获取设备类型下拉框
const equipProduceList: any = ref([]);
const getEquipProduceList = async () => {
  const res = await request({
    url: "/mdm/mdmprocessequip/getList",
    method: "post",
    data: {},
  });
  if (res.code === 200) {
    equipProduceList.value = res.data;
  }
};
// 获取检具监控的数据

const dataList = ref([
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "1",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "0",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "0",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "1",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "0",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "1",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "0",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "0",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "1",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "0",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "1",
  // },
  // {
  //   detectionEquipCode: "M1000140",
  //   processEquipCode: "GL32",
  //   partCode: "1",
  //   lastCollectTime: "2025-01-14 10:00:00",
  //   clientHealthTime: "1",
  //   status: "0",
  // },
]);

const getDataList = async () => {
  const res = await request({
    url: "/pqd-etl/inspectionToolMonitor/query",
    method: "post",
    data: {
      detectionEquipCode: searchParam.value.detectionEquipCode,
      processEquipCode: searchParam.value.processEquipCode,
      status: searchParam.value.status,
    },
  });
  if (res.code === 200) {
    dataList.value = res.data;
  }
};

const handleSelect = (e) => {
  console.log(e);

  if (e) {
    equipProduceList.value.forEach((item) => {
      if (item.id == e) {
        console.log(item);

        searchParam.value.processEquipId = item.id;
        searchParam.value.processEquipCode = item.equipCode;
      }
    });
  } else {
    searchParam.value.processEquipId = "";
    searchParam.value.processEquipCode = "";
  }
};
</script>
<style scoped lang="scss">
.box {
  width: 260px;
  height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  margin: 0 10px 10px 0;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  padding: 0 10px;
  .box1 {
    margin-top: 5px;
    font-weight: 700;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .box2 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
  }
}
.test {
  font-weight: 700;
  margin: 0 5px 0 5px;
}
.content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  cursor: pointer;
  align-content: flex-start;
}
</style>
